import React, {PureComponent} from "react";
import {connect} from "react-redux";
import {Modal, notification, Radio} from "antd";
import {getMyColumns, hideColumns, saveColumns, selectColumns} from "./actions";
import FormEditor from '../../components/FormEditor';
import {getPrincipal} from "../../lib/identity";

class ColumnsModal extends PureComponent {

    handleCreate = () => {
        const formEditor = this.formEditor.props.form;
        if (formEditor) {
            const {dispatch} = this.props;
            formEditor.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    if(values.columns.length === 0){
                        notification.error({
                            message: '至少选择一列'
                        });
                        return;
                    }
                    const updateModel = {
                        ...values,
                        userId: getPrincipal().id,
                        tableName: "ghOrder"
                    };
                    dispatch(saveColumns({...updateModel})).then(action => {
                        if (action.error !== true) {
                            formEditor.resetFields();
                            dispatch(hideColumns());
                            dispatch(getMyColumns("ghOrder"));
                            notification.success({
                                message: '保存成功'
                            });
                        }
                    });
                }
            });
        }
    };
    handleCancel = () => {
        const {dispatch} = this.props;
        dispatch(hideColumns());
        dispatch(getMyColumns("ghOrder"));
    };

    onChange = e => {
        const {dispatch, ghOrderColumns} = this.props;
        if (1 === e.target.value) {
            const menuColumns = [];
            ghOrderColumns.forEach(item => {
                menuColumns.push(item.label);
            });
            dispatch(selectColumns([...menuColumns]));
        } else {
            dispatch(selectColumns([]));
        }
    };

    render() {
        const {loading, visible, columns, ghOrderColumns} = this.props;
        const menuColumns = [];
        ghOrderColumns.forEach(item => {
            // 过滤账单备注
            if ("账单备注" !== item.label) {
                menuColumns.push({...item, "value": item.label});
            }
        });
        const schema = [
            {
                title: '基础信息',
                fields: [
                    {
                        field: 'columns',
                        title: '自定义列',
                        type: 'checkBoxSelector',
                        controlProps: {
                            dataSource: menuColumns
                        }
                    }
                ]
            }];
        return (
            <Modal
                title="修改"
                visible={visible}
                onOk={this.handleCreate}
                onCancel={this.handleCancel}
                confirmLoading={loading}
                okText="保存"
                cancelText="取消"
                width="40%"
            >
                <FormEditor
                    schema={schema}
                    column={1}
                    defaultReadonly={false}
                    showActionBar={false}
                    defaultValues={{"columns": columns}}
                    wrappedComponentRef={inst => (this.formEditor = inst)}
                />
                <Radio.Group name="radioGroup" onChange={this.onChange}>
                    <Radio value={1}>全选</Radio>
                    <Radio value={2}>反选</Radio>
                </Radio.Group>
            </Modal>

        );
    }
}

const mapStateToProps = state => {
    return {
        ...state.ghOrder.columns,
        ghOrderColumns: state.common.ghOrderColumns
    };
};

export default connect(mapStateToProps)(ColumnsModal);
